import React, { useState, useEffect, memo } from 'react'
import { Radio, Space, Input } from 'antd-mobile'
import "./index.less"

function CheckItems({ info, detaiObj }) {
    const [codeVal, setCodeVal] = useState(()=>info.actualValue); //实际值
    const [status, setStatus] = useState(() => {
        return info.inspectionResult || ''
    }) //QUALIFIED合格 UNQUALIFIED不合格

    const pageStatus = detaiObj.status

    //输入实际值 合格不合格自动切换
    useEffect(() => {
        if (!codeVal) return
        if (info.valueType == 'STANDARD') {
            if (codeVal == info.standard) {
                setStatus('QUALIFIED')
            } else {
                setStatus('UNQUALIFIED')
            }
        }

        if (info.valueType == 'RANGE') {
            if (info.lowerLimitValue <= Number(codeVal) && Number(codeVal) <= info.upperLimitValue) {
                setStatus('QUALIFIED')
            } else {
                setStatus('UNQUALIFIED')
            }
        }
    }, [codeVal]);

    useEffect(() => {
        // if (status || codeVal) {
        info.inspectionResult = status
        info.actualValue = codeVal

        // }
    }, [codeVal, status]);

    return (
        <div className='check-line'>
            <div className="c-name">
                <span>检测项：</span>
                <div className="c-txt">{info.itemName}</div>
            </div>
            <div className="c-methods">
                <span>方式：</span>
                <div className="c-txt">{info.method}</div>
            </div>
            <div className="c-type">
                <span>类型：</span>
                <div className="c-txt">
                    <div className='c-vtypes'>
                        {
                            info.valueType == 'STANDARD' ? "标准值" :
                                info.valueType == 'RANGE' ? '范围值' :
                                    info.valueType == 'STATUS' ? '状态值' : ''
                        }
                    </div>
                    {
                        info.valueType == 'STATUS' ? null :
                            <div className="c-vShow">
                                {
                                    info.valueType == 'STANDARD' ?
                                       ( <span> 标准值：{info.standard}  </span>) : null
                                }
                                {/* {
                                    info.valueType == 'RANGE' ?
                                        <>
                                            <span>
                                                参考值：{info.referenceValue}
                                            </span>
                                            <span>
                                                下限值: {info.lowerLimitValue}
                                            </span>
                                            <span>
                                                上限值: {info.upperLimitValue}
                                            </span>
                                        </> : null
                                } */}
                            </div>
                    }
                </div>
            </div>
            {
                info.valueType == 'STATUS' ? <div className="c-methods">
                    <span style={{ width: 70 }}>管理基准：</span>
                    <div className="c-txt">{info.benchmark}</div>
                </div> :
                    null
            }
            {
                info.valueType == 'RANGE' ?
                    <>
                        <p className='c-txt'>
                            <span>
                                参考值：{info.referenceValue}
                            </span>
                            <span>
                                下限值: {info.lowerLimitValue}
                            </span>
                            <span>
                                上限值: {info.upperLimitValue}
                            </span>
                        </p>
                    </> : null
            }
            {
                pageStatus !== 'WAIT_FINISH' ?
                    <div className="c-input">
                        <Input
                            value={codeVal}
                            onChange={text => { setCodeVal(text) }}
                            disabled={pageStatus != 'PROCESSING' || info.valueType == 'STATUS'}
                            placeholder='请输入实际值' />
                        <div className="c-result">
                            <Radio.Group defaultValue={status == 'QUALIFIED' ? 'QUALIFIED' : 'UNQUALIFIED'} value={status}
                                onChange={val => {
                                    setStatus(val)
                                }}>
                                <Space direction='horizontal' justify="around">
                                    <Radio value='QUALIFIED'
                                        disabled={pageStatus !== 'PROCESSING' || info.valueType !== 'STATUS'}
                                        style={{
                                            '--icon-size': '14px',
                                            '--font-size': '12px',
                                            'color': '#0ECF00'
                                        }}

                                    >合格</Radio>
                                    <Radio value='UNQUALIFIED'
                                        disabled={pageStatus !== 'PROCESSING' || info.valueType !== 'STATUS'}
                                        style={{
                                            '--icon-size': '14px',
                                            '--font-size': '12px',
                                            'color': '#FF0000'
                                        }}
                                    >不合格</Radio>
                                </Space>
                            </Radio.Group>
                        </div>
                    </div> : null
            }
        </div>
    );
}

export default memo(CheckItems);
